<template>
    <el-tabs v-model="contentHeader" class="content-header"  @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="info">
          <table class="detail-table">
            <tr>
              <td colspan="4" style="text-align: left">
                基本信息<i @click="showEdit()" class="el-icon-edit" style="margin-left: 14px;color: #409EFF;font-size: 1.2em;" title="编辑"></i>
              </td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>{{userInfo.name}}</td>
              <td>用户编码</td>
              <td>{{userInfo.user_no}}</td>
            </tr>
            <tr>
              <td>证件类型</td>
              <td>{{userInfo.certificate_type_name}}</td>
              <td>证件号码</td>
              <td>{{userInfo.certificate_no}}</td>
            </tr>
            <tr>
              <td>Email</td>
              <td>{{userInfo.email}}</td>
              <td>手机号</td>
              <td>{{userInfo.phone}}</td>
            </tr>
            <tr>
              <td>QQ</td>
              <td>{{userInfo.qq}}</td>
              <td>微信</td>
              <td>{{userInfo.we_chat}}</td>
            </tr>
            <tr>
              <td colspan="4" style="text-align: left">账户信息</td>
            </tr>
            <tr>
              <td>账户余额</td>
              <td>{{userInfo.money}}</td>
              <td>账户积分</td>
              <td>{{userInfo.bonus_points}}</td>
            </tr>
            <tr>
              <td>仓库编号</td>
              <td>{{userInfo.warehouse_no}}</td>
              <td>仓库地址</td>
              <td>{{userInfo.warehouse_address}}</td>
              </tr>
              <tr>
                <td>用户等级</td>
                <td>{{levelName}}</td>
                <td>认证状态</td>
                <td>未认证</td>
              </tr>
          </table>
        </el-tab-pane>
        <el-tab-pane v-if="isShowEdit" label="编辑" name="edit">
          <div  style="width: 800px; margin: 20px auto 0 auto;">
            <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="userInfo.name"></el-input>
                          </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户编码" prop="user_no">
                            <el-input v-model="userInfo.user_no" :disabled="true"></el-input>
                          </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="证件类型" prop="certificate_type_id">
                            <el-select v-model="userInfo.certificate_type_id" filterable placeholder="请选择证件类型">
                              <el-option label="身份证" :value="1"></el-option>
                              <el-option label="护照" :value="2"></el-option>
                            </el-select>
                          </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件号码" prop="certificate_no">
                            <el-input v-model="userInfo.certificate_no"></el-input>
                          </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                      <el-col :span="12">
                          <el-form-item label="电话" prop="phone">
                              <el-input v-model="userInfo.phone"></el-input>
                            </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="邮箱" prop="email">
                              <el-input v-model="userInfo.email"></el-input>
                            </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="QQ" prop="qq">
                                <el-input v-model="userInfo.qq"></el-input>
                              </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="微信" prop="we_chat">
                                <el-input v-model="userInfo.we_chat"></el-input>
                              </el-form-item>
                        </el-col>
                      </el-row>
                  <el-form-item>
                  <el-button type="primary" @click="submitForm('userInfo')">立即修改</el-button>
                  <el-button @click="cancel()">取消</el-button>
                </el-form-item>
              </el-form>
        </div>
        </el-tab-pane>
      </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      contentHeader: 'info',
      isShowEdit: false,
      userInfo: {},
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        certificate_type_id: [
          { required: true, message: '请选择一种证件', trigger: 'change' }
        ],
        certificate_no: [
          { required: true, message: '请输入证件号', trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    let self = this
    this.$axios.get('/api/User/GetInfo').then(function (data) {
      self.userInfo = data[0]
    })
  },
  methods: {
    submitForm (formName) {
      let self = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.put('/api/User/Edit', this.userInfo, {msg: '修改成功'}).then(function (data) {
            if (data.length !== 0) {
              self.contentHeader = 'info'
              self.isShowEdit = false
              self.$refs[formName].disabled = false
            }
          })
        } else {
          self.$refs[formName].disabled = false
          return false
        }
      })
    },
    cancel () {
      this.contentHeader = 'info'
      this.isShowEdit = false
    },
    showEdit () {
      this.contentHeader = 'edit'
      this.isShowEdit = true
    },
    handleClick (tab, event) {
      if (tab.index === '0') {
        this.isShowEdit = false
      }
    }
  },
  computed: {
    levelName: function () {
      switch (this.level) {
        case 1:
          return '高级会员'
        default:
          return '未知'
      }
    }
  }
}
</script>
